<template>
  <div class="rank-wrapper">
    <ZJTitle :leftTitle="classifyInfo.name"/>
    <div class="wrapper-content">
      <!--        大图       -->
      <div class="content-top">
        <img :src="goodsList[0].mainImage" alt="big_img" @click="handleItemClick(goodsList[0].id)">
      </div>
      <!--   其他小图   -->
      <div class="content-main">
        <template v-for="item in goodsList.slice(1)" :key="item.id">
          <div class="main-item" @click="handleItemClick(item.id)">
            <div class="item-img">
              <img v-lazy="item.subImages" alt="big_img">
            </div>
            <div class="item-detail">
              <p class="detail-name">{{ item.name }}</p>
              <p class="detail-tip">{{ item.subtitle }}</p>
            </div>
            <p class="item-price">
              优惠价
              <span class="price-symbol">￥</span>
              <span class="price-value">{{ item.price }}</span>
            </p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ZJTitle from "@/components/ZJTitle/ZJTitle.vue"
import {useRouter} from "vue-router";

const router = useRouter()

const {classifyInfo, goodsList} = defineProps({
  classifyInfo: {
    type: Object,
    default: () => ({
      id: 0,
      name: "分类名称"
    })
  },
  goodsList: {
    type: Array,
    default: () => []
  }
})

const handleItemClick = (goodsId: number) => {
  router.push(`/goods/detail/${goodsId}`)
}
</script>

<style scoped lang="less">
@import "src/assets/css/variable";
@import "src/assets/css/mixins";

.rank-wrapper {
  .wrapper-content {
    .content-top {
      height: 120px;
      margin-bottom: 10px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .content-main {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .main-item {
        width: 49%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 10px;


        .item-img {
          width: 100px;
          height: 100px;
          margin-bottom: 10px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }

        .item-detail {
          text-align: center;
          margin-bottom: 10px;

          .detail-name {
            font-size: 16px;
            .clamp(1);
          }

          .detail-tip {
            font-size: 12px;
            color: #999;

            overflow: hidden; //溢出内容隐藏
            text-overflow: ellipsis; //文本溢出部分用省略号表示
            display: -webkit-box; //特别显示模式
            -webkit-line-clamp: 1; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical; //盒子中内容竖直排列
          }
        }

        .item-price {
          font-size: 12px;
          color: #C81C22;

          .price-symbol {
            font-size: 12px;
            vertical-align: bottom;
          }

          .price-value {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
